<?php echo $this->Html->css('admin/admin_organisations_index'); ?>
<style>
    .big_group {
        border: solid #ccc 1px;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 1px 1px 4px #ccc;
        display: block;
        height: 350px;
    }

    .groups_list {
        display: table;
        width: 100%;
    }
    .groups_list, .groups_list ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

    .groups_list ul {
        overflow: auto;
        height: 200px;
    }

    .groups_list ul li {
        padding: 3px;
        overflow: hidden;
    }

    .groups_list ul li:hover {
        background-color: #f9f9f9;
    }

    .groups_list ul li.selected {
        background-color: #f9f9f9;
    }

    .groups_list .category_name {
        font-weight: bold;
        padding: 4px;
        width: 70%;
        cursor: pointer;
    }

    .groups_list .group_name, .groups_list .date_name {
        padding: 4px;
        cursor: pointer;
        width: 78%;
    }

    .groups_list .editable {
        border: solid #eee 2px;
        box-shadow: inset -1px -1px 3px #f9f9f9;
        padding: 2px;
        border-radius: 4px;
        background-color: #fff;
    }

    .groups_list .disabled {
        color: #f5f5f5;
        text-shadow: 0px 1px 1px #fafafa;
    }

    .groups_list .options {
        text-align: right;
        padding: 3px;
    }

    .groups_list .options a {
        color: #0088cc;
        text-decoration: none;
        padding: 5px;
    }

    .groups_list .column {
        display: table-cell;
        min-height: 200px;
        border-right: solid #f8f8f8 1px;
    }

    /*    .groups_list .column:not(:last-child) {
            border-right: solid #f8f8f8 1px;
        }*/

    .groups_list .column header {
        border-bottom: solid #f8f8f8 1px;
        overflow: hidden;
        vertical-align: middle;
        padding: 0px 4px;
        box-sizing: border-box;
    }

    .groups_list .column header h5 {

    }

    .groups_list .column header .btn {
        margin-top: 5px;
    }

    .groups_list .options a.remove-link {
        color: red;
    }
</style>

<div class="" id="container">

    <div class="row">

        <div class="col-lg-7">

            <div class="panel">
                <div class="panel-heading">
                    <h4>Profile</h4>
                </div>
                <div class="panel-body">

                    <form action="<?php echo $this->Html->url(array('action' => 'org_settings')); ?>" method ="post" id="profile-form" class="form form-horizontal">

                        <div class="col-lg-8">
                            <div class="form-group">
                                <div class="col-lg-3 control-label" for="name">Name </div> 
                                <div class="col-lg-9 controls">
                                    <input class="form-control input-sm" type ="text" name="Organisation[name]" id ="name" required="" value="<?php echo $organisation['Organisation']['name']; ?>" />
                                </div>
                            </div>

                            <div class="form-group"> 
                                <div class="col-lg-3 control-label" for="email">Email </div> 
                                <div class="col-lg-9 controls">
                                    <input class="form-control input-sm" type ="email" name="Organisation[email]" id ="email" value="<?php echo $organisation['Organisation']['email']; ?>"/>
                                </div> 
                            </div>

                            <div class="form-group">
                                <div class="col-lg-3 control-label" for="phone">Phone </div> 
                                <div class="col-lg-9 controls">
                                    <input class="form-control input-sm" type ="tel" name="Organisation[phone]" id ="phone" value="<?php echo $organisation['Organisation']['phone']; ?>" />
                                </div> 
                            </div>

                            <div class="form-group">
                                <div class="col-lg-3 control-label" for="website">Website </div> 
                                <div class="col-lg-9 controls">
                                    <input class="form-control input-sm" type ="text" name="Organisation[website]" id ="website" value="<?php echo $organisation['Organisation']['website']; ?>" />
                                </div> 
                            </div>

                            <div class="form-group">
                                <div class="col-lg-3 control-label" for="website">Address </div> 
                                <div class="col-lg-9 controls">
                                    <input class="form-control input-sm" type ="text" name="Organisation[address]" id ="address" value="<?php echo $organisation['Organisation']['address']; ?>"/>
                                </div> 
                            </div>
                            
                            <div class="form-group">
                                <div class="col-lg-3 control-label" for="city">City </div> 
                                <div class="col-lg-9 controls">
                                    <input class="form-control input-sm" type ="text" name="Organisation[city]" id="city" value="<?php echo $organisation['Organisation']['city']; ?>"/>
                                </div> 
                            </div>
                            
                            <div class="form-group">
                                <div class="col-lg-3 control-label" for="state">Region / State </div> 
                                <div class="col-lg-9 controls">
                                    <input class="form-control input-sm" type="text" name="Organisation[state]" id="state" value="<?php echo $organisation['Organisation']['state']; ?>"/>
                                </div> 
                            </div>
                            
                            <div class="form-group">
                                <div class="col-lg-3 control-label" for="country">Country</div> 
                                <div class="col-lg-9 controls">
                                    <input class="form-control input-sm" type="text" name="Organisation[country]" id="country" value="<?php echo $organisation['Organisation']['country']; ?>"/>
                                </div> 
                            </div>

                            <div class="col-lg-offset-3 col-lg-9 form-actions">
                                <button type="submit" class="btn btn-primary btn-sm" disabled="" id="submit-btn"><i class="icon icon-save"></i> Save Changes</button>
                                <!--<button type="button" class="btn btn-danger btn-sm" id="cancel-btn"><i class="icon icon-remove"></i> Cancel</button>-->
                            </div>
                        </div>

                        <div class="col-lg-4 text-center">
                            <div class="thumb-lg">
                                <img src="http://placehold.it/128x128" class="img-rounded img-thumbnail" />
                            </div>

                            <div class="m-t-sm">
                                <button class="btn btn-white btn-sm" disabled=""><i class="fa fa-upload"></i> Change</button>
                            </div>

                            <input type="hidden" name="Organisation[id]" value="<?php echo $organisation['Organisation']['id']; ?>" />
                        </div>
                    </form>

                </div>
            </div>
        </div>

        <div class="col-lg-7">
            <div class="panel">
                <div class="panel-heading">

                    <h4>Groups And Associations</h4>

                    <p>
                        Click on a Group name on the left to load the subgroups under it. <b>Double-Click</b> on the Group or Subgroup name 
                        to edit it.
                    </p>
                </div>

                <div class="panel-body">
                    <section id="groups_list" class="groups_list" data-url="<?php echo $this->Html->url(array('controller' => 'organisation', 'action' => 'org_groups')); ?>">
                        <div class="col-lg-6 column">
                            <header>
                                <h5 class="pull-left">Groupings</h5>
                                <button class="btn btn-xs pull-right" id="add_category"><i class="fa fa-plus"></i></button>
                            </header>

                            <ul id="categories">
                                <?php foreach ($categories as $category) { ?>
                                    <li style="overflow: hidden;">
                                        <div class="category_name pull-left" data-id="<?php echo $category['OrganisationGroupType']['id']; ?>">
                                            <?php echo $category['OrganisationGroupType']['name']; ?>
                                        </div>

                                        <div class="options pull-right">
                                            <a href="#" class="remove-link" data-id="<?php echo $category['OrganisationGroupType']['id']; ?>">
                                                <i class="fa fa-trash-o"></i>
                                            </a>

                                            <i class="fa fa-angle-right"></i>
                                        </div>
                                    </li>
                                <?php } ?>
                            </ul>
                        </div>

                        <div class="col-lg-6 column">
                            <header>
                                <h5 class="pull-left">Sub Groups</h5>
                                <button class="btn btn-xs pull-right" id="add_group" disabled=""><i class="fa fa-plus"></i></button>
                            </header>

                            <ul id="groups"></ul>
                        </div>

                    </section>
                </div>
            </div>
        </div>

        <div class="col-lg-5">
            <div class="panel">
                <header class="panel-heading">
                    <h4>Special Dates</h4>

                    <p>Use the button below to add new special dates to collect for members</p>
                </header>

                <div class="panel-body">
                    <section class="groups_list">
                        <div class="column">
                            <header style="overflow: hidden;">
                                <h5 class="pull-left">Date Types</h5>
                                <button class="btn btn-xs pull-right" id="add_date"><i class="fa fa-plus"></i></button>
                            </header>

                            <ul id="dates">
                                <?php foreach ($dates as $date) { ?>
                                    <li style="overflow: hidden;">
                                        <div class="date_name pull-left" data-id="<?php echo $date['OrganisationAnniversary']['id']; ?>">
                                            <?php echo $date['OrganisationAnniversary']['name']; ?>
                                        </div>

                                        <div class="options pull-right">
                                            <a href="#" class="remove-link" data-id="<?php echo $date['OrganisationAnniversary']['id']; ?>">
                                                <i class="fa fa-trash-o"></i>
                                            </a>
                                        </div>
                                    </li>
                                <?php } ?>
                            </ul>
                        </div>

                    </section>
                </div>
            </div>
        </div>

    </div>
</div>
<?php
echo $this->Html->script('plugins/jquery.trocar/jquery.trocar.js');
echo $this->Html->script('app/views/organisations/admin_org_groups.js');
echo $this->Html->script('app/views/organisations/admin_org_settings');
?>
